<!--suppress ALL -->
<template>
  <div class="dashboard-editor-container">

    <panel-group/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ve-line :data="lineCharData" :settings="chartSettings" :colors="colors"/>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ve-histogram :data="histogramCharData" :colors="histogramColor"/>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup
  },
  data() {
    return {
      colors: ['#36a3f7', '#40c9c6', '#f4516c'],
      histogramColor: ['#40c9c6'],
      chartSettings: {
        area: true
      },
      lineCharData: {
        columns: ['日期', '新租数', '续租数', '退租数'],
        area: true,
        rows: []
      },
      histogramCharData: {
        columns: ['日期', '日收益'],
        area: true,
        rows: []
      }
    }
  },
  mounted() {
    if (this.$route.query.token) {
      this.axios.defaults.headers.common['Authorization'] = this.$route.query.token
    }
    this.getList()
  },
  methods: {
    getList() {
      this.axios.get('/api-analyze/v3.1/financial-statistics/income', {
        params: {
          days: 30
        }
      }).then((res) => {
        if (res.data) {
          for (let i = res.data.length - 1; i > 0; i--) {
            const item = {
              '日期': res.data[i].statisticsTime.split(' ')[0],
              '新租数': res.data[i].newRentCount,
              '续租数': res.data[i].renewRentCount,
              '退租数': res.data[i].unrentCount
            }
            const item2 = {
              '日期': res.data[i].statisticsTime.split(' ')[0],
              '日收益': res.data[i].earnings
            }
            this.lineCharData.rows.push(item)
            this.histogramCharData.rows.push(item2)
          }
        }
      })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
